<template>
  <div class="questionnaire">
    <a-card class="min-h-[68px] rounded my-[10px]" :body-style="{ padding: '0px 10px 10px 0px', minHeight: '1000px' }"
      :bordered="false">
      <!-- 头部返回列表功能 -->
      <template #extra>
        <a-button class="border-none" icon="rollback" @click="rollback">{{ $t("app.setting.themecolor.rr99") }}
        </a-button>
      </template>
      <!-- 正文头部 -->
      <div slot="title">
        <a-space>
          <div class="ty"></div>
          {{ $t("user.v159") }}
        </a-space>
      </div>
      <!-- 头部导航+查看RPA详情 -->
      <div style="margin: 30px 10px 0px 20px">
        <div style="display: flex; justify-content: space-between">
          <a-progress v-bind:width="400" stroke-linecap="square" :percent="100" :steps="questionnaireInfo.ModelTopicOver"
            style="margin-right:10px; margin-bottom: 15px" />
          <!-- 查看详情 -->
          <div style="margin-left: 20px; margin-top: -6px">
            <rpaDetail :rpaDetailId="id" />
          </div>
        </div>
      </div>
      <div class="card-box">
        <!--  左边章节+答题日志部分 -->
        <div class="card-left">
          <p class="left-title" v-show="finishStatus != 1">
            {{ $t("user.verification-code.required11156611043") }}
          </p>
          <div style="overflow: auto; height: 400px; margin-left: 10px" v-show="finishStatus != 1">

          </div>
          <!-- 退回日志 -->
          <div style="margin-top: 10px" v-if="itemsRemark.length">
            <p class="left-title">{{ $t("user.v126") }}</p>
            <div style="
                  overflow: auto;
                  height: 300px;
                  margin: 10px;
                  padding-top: 5px;
                ">
              <!-- 时间轴 -->
              <a-timeline>
                <a-timeline-item v-for="item in itemsRemark" :key="item.Id">
                  <div>
                    {{ item.DpiaCommentsDCO + item.DpiaCommentsCreatetime }}
                  </div>
                  <div>
                    {{ $t("user.verification-code.required1115661105763") }}：{{
                      item.DpiaCommentsTypeStr
                    }}
                  </div>
                  <div>
                    <span>{{
                      $t("user.verification-code.required111566181")
                    }}</span>{{ item.DpiaCommentsInfo ? item.DpiaCommentsInfo : "无" }}
                  </div>
                </a-timeline-item>
              </a-timeline>
            </div>
          </div>
          <!-- 答题日志 -->
          <div style="margin-top: 10px">
            <p class="left-title">
              {{ $t("user.verification-code.required11156611057737144229") }}
            </p>
            <div style="
                  overflow: auto;
                  height: 300px;
                  margin: 10px;
                  padding-top: 5px;
                ">
              <!-- 时间轴 -->
              <a-timeline>
                <a-timeline-item v-for="item in AnswerLogList" :key="item.Id">
                  <div>
                    {{
                      isLang
                      ? item.DpiaAnswerRecordAnswer
                      : item.DpiaAnswerRecordAnswerEn
                    }}
                  </div>
                </a-timeline-item>
              </a-timeline>
            </div>
          </div>
        </div>
        <!-- 右边答题部分 -->
        <div class="card-right">
          <!-- 右边答题部分-->
          <div v-if="finishStatus == 0">
          <p> Dear user, you do not need to answer the DPIA questionnaire since you have chosen No Personal Information or
            Important Data Involved in your RPA. </p>
          <p> You can submit this request to DCO for approval, or go back to RPA to modify. </p>
        </div>
        <!-- 最后成功提交的结果 -->
        <div
            style="
              position: absolute;
              right: 0;
              padding: 30px;
              margin-right: 10%;
            "
            v-if="finishStatus == 1"
          >
            <img
              src="@/img/13.png"
              alt=""
              style="padding: 20px 190px 20px 100px"
            />
            <p style="font-size: 20px; margin-left: -90px; text-align: center">
              {{ $t("user.verification-code.required11156611044") }}
            </p>
            <!-- <p
            style="
              font-size: 14px;
              margin-left: -20px;
              white-space: normal;
              word-break: break-word;
              width: 450px;
              text-align: center;
              transform: translateX(-34px)
            "
          >
            {{ $t("user.verification-code.required11156611045") }}
          </p> -->
          </div>
        </div>
      </div>
      <!-- 下方按钮 -->
      <div :style="{
        position: 'fixed',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '20px 16px',
        background: '#fff',
        textAlign: 'center',
        zIndex: 1,
      }">
      <!-- 交卷并提交DCO评估 -->
        <a-button type="primary" @click="showModal"  v-if="finishStatus != 1">
          {{ $t("user.verification-code.required11156611048") }}
        </a-button>
        <a-button
          @click="review()"
          v-show="finishStatus == 1"
          style="margin-right: 20px"
          >{{ $t("user.verification-code.required1115661105718") }}
        </a-button>
        <a-modal v-model="visible" @ok="handleOk"
        :title="$t('user.verification-code.required11156611049')"
        :okText="$t('user.verification-code.required111566110577273')"
          :closable="false" width="400px" :cancel-text="$t('user.email.required11')" :confirmLoading="confirmLoading">
          <!-- {{ $t("user.verification-code.required11156611049") }}
          <br /><br /> -->
          <a-space>{{ $t("user.verification-code.required111566130") }}
            <a-select :placeholder="$t('user.verification-code.required111566130')" v-model="dco" show-search
              option-filter-prop="children" :filter-option="filterOption" style="width: 165px">
              <a-select-option v-for="item in userList" :value="item.value" :key="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-space>
        </a-modal>
      </div>
    </a-card>
    <div class="big-box" v-if="ifLoading">
      <a-spin />
    </div>
  </div>
</template>
  
<script>
import {
  dpiaQuestionChangeStatus,
} from "@/api/dpia/form";
import Readio from "./readio.vue";
import Checkbox from "./checkbox.vue";
import Esitory from "./esitory.vue";
import Four from "./four.vue";
import RpaDetail from "./components/rpaDetail.vue";
import { quesionFindRpaId, rpaDetail } from "@/api/rpa/form";
import { DcoQuery } from "@/api/common/form";
import Other from "./other.vue";
import debounce from "lodash.debounce";
export default {
  components: {
    Readio,
    Checkbox,
    Esitory,
    Four,
    RpaDetail,
    Other,
  },
  data() {
    return {
      dco: undefined,
      // DCO列表
      userList: [],
      // DCO按钮
      dcoButtom: false,

      // 上一页按钮控制
      previousPageButtom: true,

      // 下一页按钮控制
      nextPageButtom: true,

      current: "",
      value: "",
      visible: false,

      // 配置分页
      pagination: {
        page: 1,
        pageSize: 1000,
        total: 0,
      },

      // 左侧的章节列表
      chapterLists: [],

      // 基础答题信息
      questionnaireInfo: {},

      // 问题和答案数据
      dpiaQuestionTopicAnswer: {},

      // 问卷ID
      id: "",

      //章节ID
      chapterId: [],
      num: 0,

      // 当前题型
      topicType: 0,

      // 是否结束
      finishStatus: 0,

      // 已答题的结果
      dpiaQuestionUserLastAnswer: "",
      // 当前题目id
      currentChapter: "",
      // 退回的备注
      itemsRemark: [],
      //答题日志
      AnswerLogList: [],
      isLang: false,

      // 章节列表构建
      pageChapterLists: [],
      checkedKeys: [],
      // 防抖参数
      ifflag: false,
      confirmLoading: false,
      ifLoading: false,
      rpaInfos: {}
    };
  },
  created() {
    this.init();
  },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        if (lang == "zh-EN") {
          that.isLang = false;
        } else {
          that.isLang = true;
        }
      }
    });
  },
  methods: {
    async init() {
      try {
        let lang = localStorage.getItem("lang");
        if (lang === '"zh-CN"') {
          this.isLang = true;
        }
        this.num = 0;
        // 初始化题库
        const id = this.$route.query.id;
        this.id = id;
        let chapterLists = []
        const { data } = await quesionFindRpaId({ Id: id });
        // 获取RPA详情
        const { data: rpaDetailInfo } = await rpaDetail({ Id: data.DpiaRpaId });
        this.rpaInfos = rpaDetailInfo;
      } catch (error) {
        console.log("error:", error);
        this.$message.error(error);
      }
    },
    async showModal() {
      this.visible = true;
      // 获取用户列表下拉
      const { data: userList } = await DcoQuery({ ApprovalAlias: "DCO" });
      this.userList = userList;
    },
    async handleOk(e) {
      // 交卷
      if (this.dco == undefined) {
        this.$message.error(
          this.$t("user.verification-code.required111566110577268")
        );
        return;
      }
      try {
        this.confirmLoading = true;
        await dpiaQuestionChangeStatus({
          Id: this.id,
          DpiaStatus: 2,
          DpiaDcoUserId: this.dco,
        });
        this.finishStatus = 1;
        this.$message.success(
          this.$t("user.verification-code.required11156611045")
        );
      } catch (error) {
        let lang = localStorage.getItem("lang");
        if (lang === '"zh-EN"') {
          this.$message.error(
            "Failed to submit the paper, you cannot submit it to yourself"
          );
        } else {
          this.$message.error(error);
          console.log(error);
        }
      } finally {
        this.confirmLoading = false;
      }
      this.visible = false;
    },
    rollback() {
      this.$router.push({ path: "/dpia/service" });
    },
    review() {
      this.$router.push({
        path: "/dpia/onequestion/reviewlved",
        query: { id: this.id },
      });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

  },
};
</script>
  
<style lang="less" scoped>
/deep/ .ant-card-body {
  // display: flex;

  .buttomm {
    width: 100%;
  }

  .card-box {
    width: 100%;
    // height: 100%;
    overflow: hidden;
    font-size: 15.5px;
    display: flex;
    overflow: auto;
    height: auto;
  }

  .card-left {
    /*rectangle copy 4备份 87*/
    color: #444e84;
    left: 309px;
    top: 287px;
    width: 358px;
    opacity: 0.67;
    border-radius: 2px;
    background: #f7faff;

    ul {
      margin-top: 10px;
    }

    ul li {
      padding: 3px;
    }
  }

  .card-right {
    // margin: 30px 30px 30px 350px;
    flex: 1;
    z-index: 1;
    width: auto;
    max-width: calc(100vw - 358px - 220px);
    margin: 0 0 20px 10px !important;

    .required .shu+span {
      &::after {
        content: "*";
        color: #f5222d;
        padding-left: 2px;
      }
    }
  }

  .card-left-review {
    margin: 0 30px 0 20px;
    color: #444e84;
    left: 339px;
    top: 287px;
    //width: 388px;
    height: 108px;
    opacity: 0.67;
    border-radius: 2px;
    background: #f7faff;
    margin-bottom: 30px;
  }

  .left-title {
    color: #050c34;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    padding-left: 20px;
    background: #e7f0ff;
    border-bottom: 1px solid #ddd;
  }

  p {
    color: #000;
  }

  .active {
    color: blue;
    font-size: 18px;
  }
}

.ant-card {
  overflow: auto;
  height: auto;
}

::v-deep .ant-tree-title {
  display: inline-block;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

::v-deep .ant-tree-child-tree .ant-tree-node-content-wrapper {
  background-color: transparent !important;
  cursor: default;
}

.big-box {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>